<template>
  <div class="run">
    <div class="top">
      <span class="text">跑步</span>
      <div class="top_footer">
        <div class="div1">
              <p> 7 月累积跑量<ArrowRight witdh='20px' height='10px' /></p>
              <p><span style="fontSize:30px;color:#f0f0f0">0.00</span> km/5km</p>
        </div>  
        <div class="div2">
             <p> 训练状态<ArrowRight witdh='20px' height='10px' /></p>
              <p><span style="fontSize:27px;color:#f0f0f0;marginTpo:10px;float:left">数据不足</span></p>
        </div>  
         
      </div>
      <!-- <h1>{{userip? userip.city : '正在定位'}}</h1> -->
      <!-- <h2>{{longitude}}{{latitude}}</h2> -->
    </div>
    <div class="cont"></div>
    <div class="footer">
      <div class="main">
        <img id="img1" :src="`${imgURL}`" alt="" />
      </div>
      <div class="main2">
        <p>户外跑</p>
        <p>
          <nut-animate type="twinkle" :loop="true">
            <nut-animate type="ripple" :loop="true"> GPS定位中</nut-animate>
          </nut-animate>
        </p>
      </div>
      <div class="main3">
          <div style="marginTop:0px;float:left;marginLeft:30%">
            <svg style="marginTop:12px;float:left" t="1689837591574" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13555" width="20" height="20"><path d="M690.5 222.9c61.4 0 111.2-49.8 111.2-111.2S751.9 0.4 690.5 0.4 579.2 50.2 579.2 111.6 629 222.9 690.5 222.9z" fill="#ffffff" p-id="13556"></path><path d="M1017.7 155.3c-12.8-21-40.1-27.7-61.1-14.9-160.8 97.7-281 127.2-356.8 87.6-18.4-9.6-32.2-22.2-46.8-35.6-23.9-21.9-51.1-46.6-97.2-57.3-91.5-21.1-195.6 27.8-309.1 146-17 17.7-16.5 45.9 1.2 62.9 8.6 8.3 19.8 12.4 30.9 12.4 11.7 0 23.3-4.6 32.1-13.7 89-92.6 166.7-134.5 224.8-121 23.4 5.4 37.6 18.4 57.4 36.4 0.3 0.3 0.7 0.6 1 0.9L315.7 531.7c-11.5 17.5-7.6 39.9 7.1 53.7-23.8 32-60.2 66.7-113.8 84.7-63.8 21.6-121.5 9.1-150.1-0.2-23.5-7.5-48.5 5.3-56 28.7-7.6 23.4 5.3 48.5 28.6 56 23 7.5 59.9 16.3 104.2 16.3 30.9 0 65.5-4.3 101.7-16.5 75.9-25.6 126.5-74.9 158.8-119.3l26 17c11.9 7.8 26.1 8.1 38.4 3.3 1.5 1.4 2.5 3.2 4.2 4.4 65.5 45.5 121.6 101.6 166.8 166.8 35.5 51.2 63.5 107.3 83.4 166.8 6.2 18.6 23.6 30.4 42.2 30.4 4.7 0 9.4-0.8 14.1-2.3 23.3-7.8 35.8-33 28.1-56.3-22.5-67.4-54.4-131-94.6-189.2-51.2-73.9-114.8-137.5-189.1-189.1l162.4-248.3c1-1.5 1.2-3.2 1.9-4.8 88.7-1.2 195.4-40.1 322.8-117.4 21-12.7 27.7-40.1 14.9-61.1z" fill="#ffffff" p-id="13557"></path></svg>
            <span class="start" @click="Go">开始</span>
          </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, createVNode } from "vue";
import { onMounted } from "vue";
import axios from "axios";
import { showDialog } from "@nutui/nutui";
import { ArrowRight } from '@nutui/icons-vue';
import { useRouter} from 'vue-router'

const router = useRouter()

let userip = ref();
let longitude = ref(116.481485);
let latitude = ref(39.990464);
let imgURL = `https://restapi.amap.com/v3/staticmap?location=${longitude.value},${latitude.value}&zoom=12&size=65*65&markers=mid,,A:116.481485,39.990464&key=6988ea826a9ab3bd94045c48c710c123`;

onMounted(() => {
  // getGps()
  //通过高德地图 获取用户所在ip
  axios
    .get("https://restapi.amap.com/v3/ip?key=6988ea826a9ab3bd94045c48c710c123")
    .then((val) => {
      let r = val.data.rectangle;
      let img = document.getElementById("img1");
      userip.value = val.data;
      let longitude = r.slice(0, 11);
      let latitude = r.slice(12, 23);
      img.src = `https://restapi.amap.com/v3/staticmap?location=${longitude},${latitude}&zoom=8&size=65*65&markers=mid,,A:116.481485,39.990464&key=6988ea826a9ab3bd94045c48c710c123`;
    });

  setTimeout(() => {
    showDialog({
      //   title: "提示",
      content: createVNode(
        "span",
        { style: { color: "red", fontSize: "16px" } },
        "检测到您在" + userip.value.city + ",是否准确?"
      ),
      okText: "重新定位",
      onCancel,
      onOk,
    });
  }, 1000);
});

const onCancel = () => {};

const onOk = () => {
  getGps();
};

//通过h5的navigator.geolocation获取到定位 但是只有IE浏览器好使
const getGps = () => {
  let options = {
    enableHighAccuracy: true,
    maximumAge: 1000,
  };
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
  } else {
    console.log("浏览器不支持");
  }
};

const onSuccess = (position) => {
  console.log("成功");
  let img = document.getElementById("img1");

  let longitude = position.coords.longitude;
  let latitude = position.coords.latitude;
  console.log(position);
  //  console.log(longitude);
  img.src = `https://restapi.amap.com/v3/staticmap?location=${longitude},${latitude}&zoom=14&size=65*65&markers=mid,,A:116.481485,39.990464&key=6988ea826a9ab3bd94045c48c710c123`;
};

const onError = (error) => {
  switch (error.code) {
    case 1:
      alert("位置服务被拒绝！");
      break;
    case 2:
      alert("暂时获取不到位置信息！");
      break;
    case 3:
      alert("获取信息超时！");
      break;
    case 4:
      alert("未知错误！");
      break;
  }
};

const Go = () =>{
  router.push('/runing')
}
// //通过高德获取静态图片
// const getMapimg = () =>{

// }
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.run {
  .top {
    height: 230px;
    width: 100%;
    background-color: rgb(58, 52, 66);
    .text {
      font-size: 20px;
      color: white;
      display: inline-block;
      margin-top: 3%;
      margin-left: 4%;
    }
    .top_footer{
        width: 100%;
        height: 80px;
        // background-color: red;
        margin-top: 30px;
        .div1{
            width: 50%;
            height: 100%;
            float: left;
            // background-color: red;
            p:nth-child(1){
                color: white;
                font-size: 13px;
                color: #a0a0a0;
                margin-left: 8%;
            }
            p:nth-child(2){
                color: white;
                margin-left: 8%;
            }
        }
        .div2{
            width: 50%;
            height: 100%;
            float: left;
            // background-color: white;
              p:nth-child(1){
                color: white;
                font-size: 13px;
                color: #a0a0a0;
                margin-left: 8%;
            }
            p:nth-child(2){
                color: white;
                margin-left: 8%;
            }
        }
    }
  }
  .cont {
    height: 600px;
    width: 100%;
    background-color: white;
    margin-top: -50px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
  }
  .footer {
    width: 95%;
    height: 55px;
    border-radius: 30px;
    background-color: rgb(246, 246, 246);
    position: fixed;
    left: 2.5%;
    bottom: 1%;
    .main {
      height: 80%;
      width: 45px;
      border-radius: 50px;
      margin-left: 2%;
      margin-top: 1.5%;
      background-color: white;
      float: left;
      img {
        border-radius: 50px;
        height: 90%;
        margin-top: 2.5%;
        margin-left: 2.5%;
        width: 95%;
      }
    }
    .main2 {
      float: left;
      margin-left: 10px;
      p:nth-child(1) {
        margin-top: 7px;
        font-size: 16px;
        // margin-left: 50px;
      }
      p:nth-child(2) {
        margin-top: 10px;
        margin-top: 5px;
        font-size: 12px;
        // color: red;
        // margin-left: 50px;
      }
    }
    .main3 {
      float: right;
      height: 80%;
      width: 140px;
      margin-top: 1.6%;
      background-color: #0fcd87;
      border-radius: 27px;
      margin-right: 2%;
    //   text-align:center;
    //   margin-left: 30%;
      line-height: 42px;
      .start{
          color: white;
          font-size: 15px;
          font-weight: bold;
          display: inline-block;
          margin-left: 5px;
          
        //   margin-top: -50px;
        // //   margin-top: -200px;
        //     float: right;
        // margin-right: 30px;
      }
    }
  }
}
</style>